class ShopList {
    constructor() {

        this.init();
    }
    init() {
        this.selectCondition = $$(".selectCondition")
        this.shoppingList = $$(".product_box .commodity-list")
        this.loaddata().done($.proxy(function (res) {
            this.render(res)
        }, this));
    }
    render(res) {
        var htmlGrands = "";
        var htmlList = ""
        var data = JSON.parse(res).data;
        // console.log(data);
        var templateGrands = `
            <dl class="brand_dl">
                <dt>品牌</dt>
                <dd>
                    <div class="smallList brand">
                        <%for(var i=0,item;item=data.brands[i++];){%>
                        <a href="#javascript"><%=item.replace(/[0-9]+[@]+/,"")%></a>
                        <%}%>
                    </div>
                </dd>
                <a href="#javascript" class="brandChoice">
                    <i></i>
                    更多
                </a>
                <a href="#javascript" class="brandmore">
                    多选
                    <i></i>
                </a>
            </dl>
            <%for(var attr in data.attrs){%>
                <%if(data.attrs[attr].length!=0){%>
                <dl class="brand_dl">
                <dt><%=attr.replace(/[0-9]+[@]+/,"")%></dt>
                <dd>
                    <div class="smallList brand">
                    <%console.log(data.attrs[attr])%>
                        <%for(var j=0,item;item=data.attrs[attr][j++];){%>
                        <a href="#javascript"><%=item.replace(/[0-9]+[@]+/,"")%></a>
                        <%}%>
                        </div>
                        </dd>
                        <a href="#javascript" class="brandChoice">
                        <i></i>
                        更多
                        </a>
                        <a href="#javascript" class="brandmore">
                        多选
                        <i></i>
                        </a>
                        </dl>
                        <%}%>
                        <%}%>
        `
        var templateList = `
            <%for(var m = 0,listItem;listItem=data.esProducts[m++];){%>
            <dl class="hov">
                <div class="show_tips">
                    <dt>
                        <a href="#javascript">
                            <img src="<%=listItem.proPictDir%>"
                                alt="" style="display: inline">
                        </a>
                    </dt>
                    <dd class="dl_size clearfix" style="display: none;"></dd>
                    <dd class="dl_tips">
                        <span class="s1">美国</span><span class="s1">自营</span><span class="s2">直降</span>
                    </dd>
                    <dd class="dl_name">
                        <a href="#javascript"><%=listItem.productName%></a>
                    </dd>
                    <dd class="dl_price clearfix">
                        <span><i>￥</i><%=listItem.cuPrice%></span>
                    </dd>
                    <dd class="lastNum">
                        <span class="deal-cnt">仅剩3件</span>
                    </dd>
                    <span class="loveHeart">收藏</span>
                </div>
            </dl>
            <%}%>
        `
        
        
        htmlGrands = ejs.render(templateGrands, {
            data
        })
        htmlList = ejs.render(templateList,{
            data
        })
        this.selectCondition.innerHTML = htmlGrands;
        this.shoppingList.innerHTML = htmlList;
    }

    
    loaddata() {
        var u = window.location.href
        var pid = u.substring(u.lastIndexOf('?') + 1);
        var url = "/liebiao"
        // console.log(pid);
        return $.ajax({
            url,
            data: {
                v: "1",
                appKey: "100001",
                pageSize: "20",
                pageNum: "3",
                dispId: pid,
                deviceNumber: "1563240404433",
                channel: "1",
            }
        })
    }
}
new ShopList()